<template>
  <div class="addbut">
    <div></div>
    <div>
      <el-upload
        accept="application/json,text/plain"
        class="upload-demo"
        action="#"
        :http-request="(ctx) => uploadFile(serviceName, ctx)"
        :show-file-list="false"
      >
        <el-button size="small" type="text" icon="UploadFilled"
          >上传文件</el-button
        >
      </el-upload>
    </div>
  </div>
  <div class="flex-c">
    <div class="flex-mian">
      <el-table :data="data" style="width: 100%" size="mini">
        <el-table-column prop="name" label="文件名">
          <template #default="scope">
            <div
              class="mian-name next"
              @click="toDetail(serviceName, scope.row.fullName)"
            >
              <el-icon><document /></el-icon><span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!current"
          prop="length"
          label="大小"
          :formatter="lengthFormat"
          width="60"
        />
        <el-table-column
          v-if="!current"
          prop="lastWriteTime"
          label="修改日期"
          width="140"
        />
      </el-table>
    </div>
    <div class="flex-left" v-loading="loading" v-if="!!current">
      <el-input
        v-model="configText"
        placeholder="Please input"
        show-word-limit
        resize="none"
        autofocus
        rows="18"
        type="textarea"
      />
      <div class="foot">
        <el-button size="medium" type="danger" @click="toDelete(serviceName)"
          >删除</el-button
        >
        <div class="grow"></div>
        <el-button size="medium" @click="current = ''">取消</el-button>
        <el-button
          type="primary"
          size="medium"
          @click="toSave(serviceName, configText)"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { ElMessageBox } from "element-plus";
export default {
  name: "",
  props: {
    serviceName: String,
  },
  watch: {
    serviceName: {
      immediate: true,
      handler(serviceName) {
        if (!serviceName) return;
        this.loadConfig(serviceName);
      },
    },
  },
  setup(props, context) {
    const state = reactive({
      current: "",
      loading: false,
      configText: "",
      data: [],
    });
    const loadConfig = (serviceName) => {
      state.data = [];
      state.loading = true;
      $.get(`api/file/lookConfigs/${serviceName}`).then((r) => {
        state.data = r.data;
      });
    };
    const toDetail = (serviceName, name) => {
      state.configText = "";
      if (state.current == name) {
        state.current = "";
        return;
      }
      state.current = name;
      state.loading = true;
      $.get(`api/file/readConfig/${serviceName}`, { fullName: name })
        .then((r) => {
          state.configText = r.data;
        })
        .finally(() => (state.loading = false));
    };

    return {
      ...toRefs(state),
      loadConfig,
      lengthFormat(row) {
        const ut = ["B", "KB", "MB", "GB", "TB"];
        if (row.length == null) return "";
        let length = row.length;
        let i = 0;
        while (length > 1024) {
          length = parseInt(length / 1024);
          i++;
        }
        return length + ut[i];
      },
      toDetail,
      toDelete(serviceName) {
        ElMessageBox.confirm("确认删除", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        }).then((r) => {
          $.get(`api/file/deleteConfig/${serviceName}`, {
            fullName: state.current,
          }).then((r) => {
            state.current = "";
            loadConfig(serviceName);
          });
        });
      },
      toSave(serviceName, text) {
        state.loading = true;
        $.post(
          `api/file/writeConfig/${serviceName}?fullName=${state.current}`,
          {
            context: text,
          }
        )
          .then((r) => {
            state.current = "";
            loadConfig(serviceName);
          })
          .finally(() => (state.loading = false));
      },
      uploadFile(serviceName, context) {
        context.headers["content-type"] = "multipart/form-data";
        $.upload(`/api/file/updateConfig/${serviceName}`, context.file).then(
          (r) => {
            state.current = "";
            loadConfig(serviceName);
          }
        );
      },
    };
  },
};
</script>
<style scoped>
.addbut {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
}

.mian-name {
  display: flex;
  align-items: center;
  cursor: default;
}
.mian-name.next {
  cursor: pointer;
}
.mian-name.next:hover {
  color: #1283ba;
}
.mian-name span {
  margin-left: 5px;
}

.flex-c {
  display: flex;
  align-items: flex-start;
}
.flex-mian {
  height: 440px;
  overflow-y: scroll;
  overflow-x: auto;
  flex-grow: 1;
  border: 1px solid #e0e0e0;
}
.flex-left {
  margin-left: 20px;
  width: 750px;
  flex-shrink: 0;
}
.foot {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.grow {
  flex-grow: 1;
}
</style>
